import jsonp from 'jsonp'

export default {
  name: 'Dingdan',
  data () {
    return {}
  },
  mounted () {
    jsonp('https://api.map.baidu.com/api?v=2.0&type=webgl&ak=7gIIsmhZ8jlaNG8MvA1GbVDAW1vp2VZI', {}, () => {
      // 初始化地图了
      this.initMap()
    })
  },
  methods: {
    initMap () {
      // 初始化地图
      // 百度 API 的文件会向 window 上暴露一个叫做 BMapGL 的变量
      // 用这个暴露出来的名字取创建地图
      // 表示初始化把地图绘制在什么位置
      const map = new window.BMapGL.Map('map')
      console.log(map)
      // 绘制一个坐标点
      const point = new window.BMapGL.Point(116.404, 39.915)
      console.log(point)
      // 在 map 上一 point 为点, 绘制地图
      map.centerAndZoom(point, 15)
      // 开启滚轮缩放
      map.enableScrollWheelZoom(true)
      map.setHeading(64.5) // 设置地图旋转角度
      map.setTilt(73)
      // 比例尺控件
      const scaleCtrl = new window.BMapGL.ScaleControl() // 添加比例尺控件
      map.addControl(scaleCtrl)
      // 创建标记点
      const marker1 = new window.BMapGL.Marker(new window.BMapGL.Point(116.404, 39.925), {
        enableDragging: true
      })
      // 在地图上添加标记点
      map.addOverlay(marker1)
    }
  }
}

/*
  百度地图 API
    + 需要注册一个百度账号
    + 打开 API 网站
      => https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5
      => 选择 开发文档 -> JavaScript API
    + 点击开发指南
      => 账号和秘钥获取
      => 点击申请成为百度开发者
      => https://lbsyun.baidu.com/apiconsole/key#/home
    + 创建一个新的应用
      => 点击创建应用
      => 名字: 必须写
      => 应用类型: 浏览器
      => Referer白名单: 必须写
    + 提交以后, 得到一个 key
      => 这个 key 就是你使用 百度 API 所需要的秘钥
      => BqzyOq3ArPwcE8A0zkecWwfvSWQgcvK2

  开始使用
    1. 需要引入一个 百度地图的 js 文件
      + 方式1: 找到我的 html 文件
        => public/index.html
        => 以 script 标签的形式写在页面里面即可
      + 方式2: 在你需要用到的组件内 引入
        => 因为 百度的 API 给的是一个 jsonp 形式的返回值
        => 我们需要发送一个 jsonp 请求
        => 把内容请求回来
        => 第三方包: jsonp
          -> 专门用来发送 jsonp 请求的第三方
          -> 就一个语法: josnp(请求地址, {}, 回调函数)
        => 导入 jsonp 第三方
        => 利用 jsonp 来发送请求

*/
